<template>
  <div class="home" style="background: #fff">
    <!-- <div class="homeBg"></div> -->
    <div style="height: 45px;line-height: 45px;padding: 0px 15px;position: right;font-size: 13px;" v-if="isLogin">
      <span @click="$router.push({path:'/login',query:{type:'register'}})">注册</span>
      <span style="color:#999">|</span>
      <span @click="$router.push({path:'/login'})">登录</span>
      <a :href="isHrdef">
        <span style="background: #fea620;color: #fff;border-radius: 5px;height: 25px;line-height: 25px;position: absolute;top: 11px;right: 10px; width: 60px; text-align: center;">APP下载</span>
      </a>
    </div>
    <div v-if="bannerList.length>0">
      <swiper dots-position="center" :show-dots="bannerList.length>1" auto loop>
        <swiper-item class="swiper-demo-img" v-for="(item, index) in bannerList" :key="index">
          <a :href="item.href">
            <img src="../../assets/lunbo.png" :src="item.imgUrl" style="width: 100%;min-height: 170px">
          </a>
        </swiper-item>
      </swiper>
    </div>
    <ul class="tabber" style="background: #fff;">
      <li @click="$router.push({path:'/main/level'})">
        <img src="../../assets/level.png" alt="" height="30">
        <div class="c6">13级邀请</div>
      </li>
      <li @click="$router.push({path:'/main/rewardList'})">
        <img src="../../assets/shareBar.png" alt="" height="30">
        <div class="c6">邀请好友</div>
      </li>
      <li @click="$router.push({path:'/main/activity'})">
        <img src="../../assets/avtiveBar.png" alt="" height="30">
        <div class="c6">活动中心</div>
      </li>
      <li>
        <a href="http://cplus.club/#/main/home">
          <img src="../../assets/wc.png" alt="" height="30">
          <!-- <img src="../../assets/myHb.png" alt="" height="30"> -->
          <!-- <div class="c6">我的红包</div> -->
          <div class="c6">望潮计划</div>
        </a>
      </li>
      <div style="clear: both;"></div>
    </ul>
    <div class="noticeBox" style="background: #fff">
      <div style="padding-left: 15px;position: relative">
        <img src="../../assets/notice.png" alt="" height="12">
        <ul class="noticeTextBox" @click="$router.push({path:'/main/notice'})">
          <li class="c9 noticeText" v-for="notice in noticeList">{{notice.title}}</li>
        </ul>
      </div>
    </div>
    <div style="height: 10px;background: #f6f6f6"></div>
    <div class="project" style="background: #fff;position: relative;">
      <div class="project-title">推荐项目</div>
      <div class="c9" style="margin-top:9px;">
        数字货币理财基金——币币套利
      </div>
      <div style="height: 20px;background: #fff"></div>
      <div style="position: absolute; top: 10px; right: 15px;" v-if="productList.push.length>1">
        <span style="color: #666">{{scrollNum}}</span>/{{productList.push.length}}</div>
    </div>
    <div style="overflow: auto;background: #fff" id="box" @scroll="myscroll()">
      <ul class="box" :style="{width:317*productList.push.length+'px'}" v-if="productList.push.length>1">
        <li class="boxLi" v-for="pro in productList.push">
          <div class="box-title">
            <div style="margin-top:10px;">
              <div>
                <span style="font-size: 18px" class="c0">{{pro.name}}</span>
              </div>
              <div style="margin-bottom: 10px;">
                <span class="c9" style="font-size: 13px">{{pro.title}}</span>
              </div>
            </div>
          </div>
          <div style="margin-top:15px">
            <div style="float: left;margin-left: 15%;">
              <div style="color: #ff1010;font-size: 22px;">{{pro.rate}}</div>
              <div style="color: #999;font-size: 13px;">{{pro.titleRate}}</div>
            </div>
            <div>
              <div style="color: #ff1010;font-size: 22px;">
                {{pro.week}}
              </div>
              <div style="color: #999;font-size: 13px;">
                {{pro.titleWeek}}
              </div>
            </div>
            <div>
              <span class="btn" @click="buy(pro.key)">立即投资</span>
            </div>
          </div>
        </li>
        <div style="clear: both"></div>
      </ul>
      <ul class="box" v-if="productList.push.length==1" style="width: 100%">
        <li class="boxLi" v-for="pro in productList.push" style="width: 94%;">
          <div class="box-title">
            <div style="margin-top:10px;">
              <div>
                <span style="font-size: 18px" class="c0">{{pro.name}}</span>
              </div>
              <div style="margin-bottom: 10px;">
                <span class="c9" style="font-size: 13px">{{pro.title}}</span>
              </div>
            </div>
          </div>
          <div style="margin-top:15px">
            <div style="float: left;margin-left: 15%;">
              <div style="color: #ff1010;font-size: 22px;">{{pro.rate}}</div>
              <div style="color: #999;font-size: 13px;">{{pro.titleRate}}</div>
            </div>
            <div>
              <div style="color: #ff1010;font-size: 22px;">
                {{pro.week}}
              </div>
              <div style="color: #999;font-size: 13px;">
                {{pro.titleWeek}}
              </div>
            </div>
            <div>
              <span class="btn" @click="buy(pro.key)">立即投资</span>
            </div>
          </div>
        </li>
        <div style="clear: both"></div>
      </ul>
      <div style="height: 10px;background: #fff;margin-top: 15px;"></div>
    </div>
    <div style="padding-left:15px;margin-bottom: 70px;background: #fff">
      <div class="hotSaleProduct">热销产品</div>
      <div class="c9" style="margin-top:9px;">法币优选项目 创造更高价值</div>
      <div style="margin-top:15px" v-for="hot in productList.hot" @click="goTo(hot.key)">
        <div style="width: 30%;float: left;">
          <div style="color:#ff1010;font-size: 25px;display: inline-block; width: 120px;font-weight: bold">{{hot.rate}}</div>
          <div class="c9" style="display: inline-block; width: 120px;">
            {{hot.text[0]}}
          </div>
        </div>
        <div style="margin-left:35%;width: 60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
          <div class="c9" style="height: 30px;line-height: 30px;">{{hot.name}}</div>
          <div class="c9" style="margin-top: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{hot.text[1]}}</div>
        </div>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
  import Tabbar from '../../components/common/Tabbar.vue'
  import http from '../../service/http.js'
  import {
    Swiper,
    GroupTitle,
    SwiperItem,
    XButton,
    Divider
  } from 'vux'
  export default {
    components: {
      Tabbar,
      Swiper,
      SwiperItem,
      GroupTitle,
      XButton,
      Divider
    },
    data() {
      return {
        noticeList: [],
        productList: [],
        liWidth: "",
        scrollNum: 1,
        bannerList: [''],
        isHrdef:"",
        isLogin:"",
      }
    },
    mounted() {
      this.isLogin=window.localStorage.getItem("login.username")?false:true;
      this.getBannner();
      this.getProduct();
      this.getList();
      this.liWidth = document.body.clientWidth;
      var ul = document.querySelector(".noticeTextBox");
      var lis = ul.children;
      var liHeight = 25;
      var index = 0;
      setInterval(function () {
        index++;
        ul.style.transition = "all .5s";
        ul.style.webkitTransition = "all .5s";
        ul.style.transform = "translateY(-" + index * liHeight + "px)";
        ul.style.webkitTransform = "translateY(-" + index * liHeight + "px)";
      }, 2000);
      ul.addEventListener("transitionend", function () {
        if (index >= lis.length - 1) {
          index = 0;
          ul.style.transition = "none";
          ul.style.webkitTransition = "none";
          ul.style.transform = "translateY(0px)";
          ul.style.webkitTransform = "translateY(0px)";
        }
      });
      //  判断是安卓还是ios
      var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; //android终端
      if(isAndroid){
        this.isHrdef='https://bncn.oss-cn-beijing.aliyuncs.com/document/biliApp-release.apk';
      }else{
        this.isHrdef="https://qr.aitjgu.cn/ENAf4";
      }
    },
    methods: {
      getBannner() {
        http.get("/home/banner?type=mbili").then((res) => {
          if (res.data.status == 200) {
            this.bannerList = res.data.msg;
          }
        })
      },
      goTo(key) {
        if (key == 'DIG') {
          this.$router.push({
            path: "/main/fp/digList"
          });
          return false
        }
        if (key == "OTC") {
          this.$router.push({
            path: "/main/fp/otcList"
          });
          return false
        }
        if (key == "ETF") {
          this.$router.push({
            path: "/main/fp/etfList"
          });
          return false
        }
        if (key == "BTC") {
          this.$router.push({
            path: "/main/fp/btcList"
          });
          return false
        }
        if (key == "ICO") {
          this.$router.push({
            path: "/main/fp/icoList"
          });
          return false
        }
        if (key == "AI") {
          this.$router.push({
            path: "/main/fp/aiList"
          });
          return false
        }
        if (key == "TETF") {
          this.$router.push({
            path: "/main/fp/tetfList"
          });
          return false
        }
        if (key == "TBTC") {
          this.$router.push({
            path: "/main/fp/tbtcList"
          });
          return false
        }
      },
      myscroll() {
        var box = document.getElementById("box").scrollLeft;
        this.scrollNum = Math.floor(box / 210) + 1
      },
      buy(key) {
        if (key == 'DIG') {
          this.$router.push({
            path: "/main/fp/digList"
          });
          return false
        }
        if (key == "AI") {
          this.$router.push({
            path: "/main/fp/aiList"
          });
          return false
        }
        if (key == "OTC") {
          this.$router.push({
            path: "/main/fp/otcList"
          });
          return false
        }
        if (key == "ETF") {
          this.$router.push({
            path: "/main/fp/etfList"
          });
          return false
        }
        if (key == "BTC") {
          this.$router.push({
            path: "/main/fp/btcList"
          });
          return false
        }
        if (key == "ICO") {
          this.$router.push({
            path: "/main/fp/icoList"
          });
          return false
        }
        if (key == "TETF") {
          this.$router.push({
            path: "/main/fp/tetfList"
          });
          return false
        }
        if (key == "TBTC") {
          this.$router.push({
            path: "/main/fp/tbtcList"
          });
          return false
        }
      },
      getList() {
        http.get("/home/notices").then((res) => {
          if (res.status == 200) {
            this.noticeList = res.data.body;
          }
        })
      },
      // 产品
      getProduct() {
        http.get("/home/home").then((res) => {
          if (res.status == 200) {
            this.productList = res.data.body;
          }
        })
      }
    },
  }
</script>

<style lang="less">
  body {
    background: #fff;
  }

  .home .c0 {
    color: #000;
  }

  .home .homeBg {
    background-image: url('../../assets/homeBg.png');
    background-size: cover;
    width: 100%;
    height: 175px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .home .tabber {
    /* margin-top: 10px; */
    padding: 10px 15px;
  }

  .home .tabber li {
    float: left;
    width: 25%;
    text-align: center;
    list-style: none;

    div {
      font-size: 13px;
    }
  }

  .home .middle {
    vertical-align: middle;
  }

  .home .c3 {
    color: #333;
  }

  .home .c6 {
    color: #666;
  }

  .home .c9 {
    color: #999;
  }

  .home .noticeText {
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: -10px;
    height: 35px;
  }

  .home .noticeTextBox {
    position: absolute;
    top: 0px;
    left: 70px;
    height: 35px;
    *zoom: 1;
    /* overflow: hidden; */
  }

  .home .noticeBox {
    height: 35px;
    line-height: 34px;
    border-top: 1px solid #f6f6f6;
    margin-top: 10px;
    overflow: hidden;

    img {
      position: absolute;
      top: 12px;
    }
  }

  .home .project {
    padding: 0px 10px;
  }

  .home .box {
    padding: 0px 12px;
    overflow: hidden;
  }


  .home .project-title {
    background: #ff7049;
    color: #fff;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
  }

  .home .boxLi {
    text-align: center;
    border: 1px solid #f6f6f6;
    height: 185px;
    box-shadow: 1px 1px 1px #f6f6f6;
    width: 300px;
    margin-right: 10px;
    float: left;
    list-style: none;
    box-shadow: inset 2px 2px 13px #f6f6f6;
  }

  .home .box-title {
    padding: 0px 15px;
    /* height: 95px; */
  }

  .home .btn {
    width: 120px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    /* background: linear-gradient(left, #fed92f, #fea50e); */
    background: -webkit-gradient(linear, left top, right top, from(#fedd32), to(#fe9e09));
    display: inline-block;
    border-radius: 25px;
    margin-top: 10px;
  }

  .home .hotSaleProduct {
    background: #ff7049;
    color: #fff;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
  }

  .vux-slider>.vux-indicator>a>.vux-icon-dot.active,
  .vux-slider .vux-indicator-right>a>.vux-icon-dot.active {
    background-color: #fff !important;
  }
</style>